<template>
  <el-container style="min-height: 100vh">
    <!--      设置高度撑满整个页面-->
    <el-aside :width="sidewith+'px'" style="background-color: rgb(238, 241, 246);box-shadow:2px 0 6px rgb(0 21 39)">
      <!--    overflow-x: hidden 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域-->
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
        background-color="rgb(48,65,86)" 
        text-color="#fff" 
        active-text-color="#ffd04b" 
        :collapse-transition="false"
        :collapse="isCollapse"
      >

<!--        添加logo-->
        <div style="height:60px;line-height:60px; text-align:center;">
          <b style="color: #b04fa2;font-size:20px" v-show="textshow">后台管理系统</b>
        </div>
        <!-- active-text-color="#ff04b":设置点击项目栏的高亮颜色-->
        <!-- :collapse="isCollapse" 设置收缩,绑定事件
:collapse-transition="false"关闭菜单动画-->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">导航一</span>
          </template>

<!--          <el-menu-item-group>-->
<!--            <template slot="title">分组一</template>-->
<!--            <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--            <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--          </el-menu-item-group>-->

          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>

          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">

            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>

      <el-header style=" font-size: 12px; border-bottom:1px solid #ccc;line-height:60px; display:flex ">
        <!--          绑定收缩按钮-->
        <div style="flex: 1;font-size:18px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width:75px; cursor: pointer">
          <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <!--            <i class="el-icon-setting" style="margin-right: 15px"></i>-->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>管理与设置</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

<!--     <el-main>    </el-main> -->
<!--在主题部分添加功能-->
      <div class="header-tool">
<!--        添加页面工具栏-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="padding:10px 20px">
        <el-input placeholder="请输入名称" style="width: 250px;margin-left: 20px;margin-top: 20px" suffix-icon="el-icon-search" v-model="username"></el-input>
        <el-input placeholder="请输入邮箱" style="width: 250px;margin-left: 20px;margin-top: 10px" suffix-icon="el-icon-message"></el-input>
        <el-input placeholder="请输入地址" style="width: 250px;margin-left: 20px;margin-top: 10px" suffix-icon="el-icon-position"></el-input>
        <el-button style="margin-left:15px" type="primary" @click="load">搜索</el-button>
      </div>

<!--      设置功能操作栏-->
      <div class="function-tool">
        <el-button style="margin-left:15px" type="primary">新增</el-button>
        <el-button style="margin-left:15px" type="primary">批量删除</el-button>
        <el-button style="margin-left:15px" type="primary">导入</el-button>
        <el-button style="margin-left:15px" type="primary">导出</el-button>
      </div>

        <el-table :data="tableData" style="margin-left: 20px; margin-top: 10px;" border stripe>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="username" label="用户名" width="140"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
          <el-table-column prop="phone" label="手机号" ></el-table-column>
          <el-table-column prop="email" label="邮箱" ></el-table-column>
          <el-table-column prop="address" label="地址" ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="">
              <el-button type="success">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      <div style="padding:20px 10px">
        <div class="block">
          <span class="demonstration"></span>
<!--             @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"-->
          <!--              分页查询以及分页跳转-->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total" >
          </el-pagination>
      </div>
      </div>

    </el-container>
  </el-container>

</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:2,
      username:"",
      collapseBtnClass:"el-icon-s-fold",
      isCollapse:false, //false:表示展开的
      sidewith:200,
      textshow:true //默认显示，flalse表示隐藏
    }
  },

  created() {
    //请求分页查询数据
    //数据查询请求的返回的是一个字符串，需要通过调用json方法进行返回一个json格式数据
    //将页面的切换变成动态数据 可以直接进行绑定，也可以使用ES6
    this.load()
      //fetch具体思路
      //就是通过fetch方法请求后端控制层所映射的地址，得到地址后，通过接口实现的方法，
      //在方法里面得到相应的配置文件所连接的数据库，在从数据库中拿到数据，通过在vue文件中实现相应的参数对应
      //在生命周期中使用fetch方法进行实现数据的映射,
      //在后端创建相应的参数之后，可以进行和前端进行绑定

  },

  methods: {
    collapse(){
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse){
        //点解按钮收缩导航栏并且隐藏logo
        this.sidewith = 64
        this.collapseBtnClass="el-icon-s-unfold" //变换图标
        // var b = document.getElementsByTagNameNS('b');
        // b.style.overflow="hidden"
        this.textshow=false

      }else {
        this.sidewith=200
        this.collapseBtnClass="el-icon-s-fold" //换回图标
        // var b1 = document.getElementsByTagNameNS('b');
        // b1.style.overflow=""
        this.textshow=true //l领用vue2.0的指令v-show，v-if设置显示和隐藏，其中v-show和v-if的指令是有区别的，他们的使用去区别在于性能问题
      }
    },
    load(){
      fetch("http://localhost:8082/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then(res => res.json()).then(res =>{
        console.log(res)
        this.tableData =res.data;
        this.total=res.total;
      })
    },

    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    }

  }
}
</script>
